<script setup lang="ts">
import { reactive,onMounted} from 'vue'
import { ArrowUndoOutline,Close,CopyOutline,Remove,LockOpenOutline,LockClosedOutline  } from '@vicons/ionicons5'
import { IPC } from 'root/common/constants'
import { time_format } from '@/utils/comm'
import { useNotification  } from 'naive-ui'
import DPlayer from 'dplayer'
import { useAppStore } from '@/store'
import { _history,_detail,_reset } from '@/api/api'
import { useRequest } from 'alova'

const store = useAppStore()

const notification = useNotification()
interface DataOne {
  id: string
  name: string
  cover: string
  url: string 
  tags:any[]
  all_time:string
  now_time:string
  bfb:number
  all_time_num:number
  now_time_num:number
  fav:number
  author:string
  description:string
}
const props = defineProps({
    data: {} as any
});

const data =  reactive({
  top:false,
  move_h:0,
  menu:false,
  last_id:"",
  next_id:"",
  video_item:{} as DataOne, 
  nowtime:0,
  innerWidth:800
});

async function on_select_ep(ep_id:any){
      const { onSuccess }  = useRequest(_detail.animes_dtl({
        id: ep_id, 
      }))
      onSuccess((res:any) => {
        data.video_item.url  = res.data.url 
        data.video_item.name  = res.data.name 
        data.video_item.cover  = res.data.cover 
        show_video_d()
      });        
}

async function on_his(ep_id:string){
      const { onSuccess }  = useRequest(_history.addHis({
        cover:data.video_item.cover,
        name:data.video_item.name,
        type_id: ep_id, 
        other: dp2.video.currentTime, 
        type: props.data.type,
      }))
      onSuccess((res:any) => {
        msg(res.data.message)
      });      
}

let dp2: any;
async function show_video_d() {
    dp2 = new DPlayer({
      container: document.getElementById("video"),
      autoplay: true,
      screenshot:false,
      preload: 'auto',
      airplay: true,
      loop:true,
      volume: 1,
      hotkey:true,
      mutex: true, //单1播放
      video: {
        url: data.video_item.url,
        //thumbnails: './thumbnails.jpg'
      },
      theme: store.thems?.primary,
      contextmenu: [
        {
            text: '将当前画面设为封面',
            click: () => {
              useRequest(_reset.reset_video_cover({
                id: props.data.ep_id,
                fps:time_format(dp2.video.currentTime)   
              }))
              props.data.cover_ste=dp2.video.currentTime
              dp2.notice("设为封面"+time_format(dp2.video.currentTime), 2000)
            },
        },
    ],
      //
    });
    dp2.seek(props.data.his_time);
    dp2.play();
    dp2.on('playing', function () {
      data.menu = false
    });
    dp2.on('pause', function () {
      data.menu = true
    });
 
    dp2.on('error', function () {
      dp2.notice("开始转码请稍后再播放", 2000)
      useRequest(_reset.reset_video({
        id: props.data.ep_id,   
      }))
      //视频加载出错,自动跳转下一个视频
      //page_next(1)
    });
}

function add_his(){
  on_his(props.data.ep_id)
  props.data.his_time=dp2.video.currentTime
  props.data.his_name="上次观看到"+time_format(props.data.his_time)
  dp2.destroy()
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const on_close = () =>  {
  props.data.drawer = false 
}

 

const setWindows = async (e:String) => {
    await window.ipcRenderer.invoke(IPC.ELECTRON_WINDOWS, e)
    if(e=="top"){ data.top=true}
    if(e=="notop"){ data.top=false}
}

const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.innerWidth = window.innerWidth 
  }
}

onMounted(() => {
  getwindow_size()
  on_select_ep(props.data.ep_id)
});

defineExpose({
  add_his,
});

</script>

<template>
  <div style="position: relative;height: 100vh;">
      <div class="pages_top" v-show="data.menu">
        <div style="width: 200px;">
          <div class="button">
            <n-icon size="20" @click="on_close()"><ArrowUndoOutline /> </n-icon> 
          </div>
        </div>
        <div>{{data.video_item.name}}</div>
        <div style="width: 200px;display: flex;justify-content: end;" v-if="data.innerWidth>400">
          <n-space class="windows-bar on_nomove">
            <n-icon size="20" class="button-item" @click="setWindows('notop')" v-if="data.top"><LockClosedOutline /></n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('top')" v-else><LockOpenOutline /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('minimize')"><Remove /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('maximize')"><CopyOutline /> </n-icon>
            <n-icon size="20" class="button-item" @click="setWindows('close')"><Close /> </n-icon>
          </n-space>
        </div>
      </div>
      

      <div id="video" class="video"  ></div> 

       
  </div>
</template>

<style lang="scss" scoped>  
.video {
    height: 100%;
    width: auto;
    margin: auto;
    text-align: center;
}

.pages_top{
    position: absolute;
    left:0px;
    top:0px; 
    z-index: 99999;
    width: 100%;
    background-color: #181818;
    height: 50px;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
}
.button{
  width: 40px;
      padding: 10px;
      cursor: pointer;
      line-height: 0;
      transition:all .3s ease-out 0s;
      border-radius: 5px;
      color:#807f7f5d;
    }
.button:hover{
  background-color:  var(--hover2);
}
.windows-bar{
      display: flex;
      align-items: center;
      justify-content: end;
      margin-right: 10px;
      margin-top: 5px;
      .button-item{
        padding: 4px;
        cursor: pointer;
        transition:all .3s ease-out 0s;
        border-radius: 3px;
        &:hover{
          background-color: var(--hover2);
        }
      }
    }

   .pages_bottom{
    position: absolute;
    left:0px;
    bottom:0px; 
    z-index: 99999;
    width: 100%;
    background-color: #181818;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 5px 10px; 
   }

   .light-mode { 
    .pages_bottom,.pages_top{
      background-color: #eee;
    }
}
   
</style>